CSS Grid System : Levoric Learn

Getting Started: Grid System

To get started with CSS Grid, you need to define a container element as a grid using the display property set to grid. Lets overview :

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

In the example above, we create a grid container with three equal columns using the grid-template-columns property. The 1fr unit represents a fraction of the available space in the grid container.

Grid Lines and Tracks

CSS Grid allows you to define both horizontal and vertical lines called grid lines. The space between two adjacent grid lines is known as a grid track. You can specify the size of these tracks using various length units.

.container {
display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: auto 1fr auto;
}

In this example, the grid container has three columns: the first is 100px wide, the second is 200px wide, and the third takes up the remaining space. The rows are defined as well, with the first and last rows sized automatically, and the middle row taking up the remaining space.

Placing Items in the Grid

To place items in the grid, you can use the grid-column and grid-row properties. These properties allow you to specify the starting and ending grid lines for each item.

.item1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}

.item2 {
grid-column: 2 / 4;
grid-row: 2 / 3;
}

In the example above, .item1 spans from the first to the second column and from the first to the third row, while .item2 spans from the second to the fourth column and from the second to the third row.

Responsive Design with CSS Grid

CSS Grid is highly effective for responsive design. By using media queries, you can adjust the grid layout for different screen sizes. Here is an example of a responsive grid layout:

.container {
display: grid;
grid-template-columns: 1fr;
}

@media (min-width: 600px) {
.container {
grid-template-columns: 1fr 1fr;
}
}

@media (min-width: 900px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}

In this example, the grid container has one column by default. When the screen width is at least 600px, it changes to two columns. When the screen width is at least 900px, it changes to three columns. This allows you to create flexible and responsive layouts that adapt to different screen sizes.

Advanced Grid Features

CSS Grid also provides advanced features such as named grid areas, implicit grids, and auto-placement. These features give you even more control over your layouts.

Named Grid Areas

Named grid areas allow you to define specific areas within the grid by name, making it easier to manage complex layouts. Here is an example:

.container {
display: grid;
grid-template-areas: 
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
}

.header {
grid-area: header;
}

.sidebar {
grid-area: sidebar;
}

.main {
grid-area: main;
}

.footer {
grid-area: footer;
}

In this example, we define a grid with four named areas: header, sidebar, main, and footer. Each area is assigned to a specific part of the grid using the grid-area property.

Implicit Grids

CSS Grid can automatically create grid tracks for items that are placed outside the explicit grid. This is known as an implicit grid. Here is an example:

.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
}

.item1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.item2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}

.item3 {
grid-column: 1 / 3;
grid-row: 3 / 4; /* This will create an implicit row */
}

In this example, .item3 is placed in a row that does not exist in the explicit grid. CSS Grid automatically creates this row with a height defined by grid-auto-rows.

Auto-Placement

The auto-placement feature allows CSS Grid to automatically place items in the next available grid cell. This is particularly useful for dynamic content. Here is an example:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}

.item {
background: #ddd;
border: 1px solid #ccc;
padding: 20px;
}

In this example, each .item is automatically placed in the next available cell of the grid, creating a responsive and flexible layout without explicitly defining the placement of each item.

Notes

CSS Grid is a powerful tool for creating flexible, responsive, and complex web layouts. By understanding and utilizing its features, you can significantly enhance your web design capabilities. We hope this tutorial has provided you with a solid foundation in CSS Grid and inspired you to explore its full potential in your projects.

For more information and examples, be sure to check out additional resources and continue experimenting with CSS Grid in your designs.